<template>
	<el-dialog
		title="领取明细"
		:visible.sync="visible"
		custom-class="detail-dialog"
		:before-close="close"
		width="380px"
	>
		<div class="content" v-loading="loading">
			<div class="form-list">
				<div class="form-item">
					<p>红包领取金额</p>
					<p>{{ recordInfo.winAmount || 0 }}元</p>
				</div>
				<div class="form-item">
					<p>红包领取个数</p>
					<p>{{ recordInfo.winNum || 0 }}个</p>
				</div>
				<div class="form-item">
					<p>红包核销金额</p>
					<p>{{ recordInfo.useAmount || 0 }}元</p>
				</div>
				<div class="form-item">
					<p>红包核销个数</p>
					<p>{{ recordInfo.useNum || 0 }}个</p>
				</div>
				<div class="form-item">
					<p>引导成交金额</p>
					<p>{{ recordInfo.alipayAmount || 0 }}元</p>
				</div>
				<div class="form-item">
					<p>预估佣金金额</p>
					<p>{{ recordInfo.preCommissionAmount || 0 }}元</p>
				</div>
				<div class="form-item">
					<p>失效回退金额</p>
					<p>{{ recordInfo.refundAmount || 0 }}元</p>
				</div>
				<div class="form-item">
					<p>失效回退个数</p>
					<p>{{ recordInfo.refundNum || 0 }}个</p>
				</div>
				<div class="form-item">
					<p>解冻红包金额</p>
					<p>{{ recordInfo.unfreezeAmount || 0 }}元</p>
				</div>
				<div class="form-item">
					<p>解冻红包个数</p>
					<p>{{ recordInfo.unfreezeNum || 0 }}个</p>
				</div>
				<div class="form-item">
					<p>退款红包金额</p>
					<p>{{ recordInfo.fpRefundAmount || 0 }}元</p>
				</div>
				<div class="form-item">
					<p>退款红包个数</p>
					<p>{{ recordInfo.fpRefundNum || 0 }}个</p>
				</div>
			</div>
		</div>
	</el-dialog>
</template>

<script>
export default {
	name: 'detail-dig',
	components: {},
	data() {
		return {
			visible: false,
			recordInfo: {},
			loading: false
		};
	},
	methods: {
		open(item) {
			this.visible = true;
			this.loading = true;
			let params = {
				appSecret: item.appSecret,
				appKey: item.appKey,
				rightsId: item.rightsId
			};
			this.$service.coupon.record
				.detail(params)
				.then(res => {
					this.recordInfo = res;
				})
				.catch(err => {
					this.$message.error(err);
				})
				.done(() => {
					this.loading = false;
				});
		},
		close() {
			this.visible = false;
			this.loading = false;
			this.recordInfo = {};
		}
	}
};
</script>

<style scoped lang="scss">
/deep/.el-dialog {
	margin-top: 10vh !important;
	.el-dialog__header {
		text-align: left;
		span {
			border-left: 5px solid #ff4400;
			padding-left: 8px;
		}
	}
	.form-list {
		color: #030303;
		font-size: 14px;
		.form-item {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #efefef;
			padding: 10px 0;
		}
	}
}
</style>
